﻿.rate {
    --bb-rate-height: 20px;
    --bb-rate-width: 20px;
    --bb-rate-margin-left: .5rem;
    --bb-rate-color: var(--bs-secondary);
    --bb-rate-active-color: var(--bs-warning);
    --bb-rate-hover-color: #c6d1de;
    --bb-rate-disabled-color: var(--bs-secondary);
    --bb-rate-font-size: 1rem;
    --bb-rate-transform: scale(1.15);
    --bb-rate-transition: .3s;
}

    .rate .rate-item {
        width: var(--bb-rate-width);
        height: var(--bb-rate-height);
        color: var(--bb-rate-color);
        font-size: var(--bb-rate-font-size);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

        .rate .rate-item:not(:last-child) {
            margin-right: var(--bb-rate-margin-left);
        }

        .rate .rate-item i:hover {
            transform: var(--bb-rate-transform);
            color: var(--bb-rate-hover-color);
            transition: var(--bb-rate-transition);
        }

    .rate.disabled .rate-item i {
        color: var(--bb-rate-disabled-color);
    }

    .rate:not(.disabled) .rate-item.is-on i {
        color: var(--bb-rate-active-color);
    }
